<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts-gl.min.js"></script>
    <script src="static/js/jquery.min.js"></script>
</head>
 
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <a href="/">Return</a>
    <br>
    <br>
    <div id="genre" style="width: 580px;height:600px;"></div>
    <script type="text/javascript">
        $.getJSON("static/data/genre-year-sales.json", d => {
            _data = d.map(v => ({
                name: v["artist"],
                value: v["count"]
            }))
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('genre'), 'light');
 
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '各音乐家听众人数的数量统计图',
                    subtext: '从图中可以看出Radiohead听众人数的数量最多。',
                    // x: 'center'
                    x: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: d.map(v => v["artist"])
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: true },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '半径模式',
                        type: 'pie',
                        radius: [30, 180],
                        center: ['50%', '50%'],
                        roseType: 'radius',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: _data
                    }
                ]
            };
 
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    </script>
</body>
</html>
